<script setup>
import blogPageOne from '@/components/blog-components/blog-PageOne.vue'
import articleLists from '@/components/blog-components/article-lists.vue'
import articleLists2 from '@/components/blog-components/article-lists2.vue'
const articles = [
    {
        author: '张三',
        title: '文章1',
        content: '这是文章1的详细内容，现在可以正常显示了！',
        time: '2025年9月28日下午2点26分'
    },
    {
        author: '张三',

        title: '文章2',
        content: '这是文章2的详细内容，切换效果正常了！',
        time: '2025年9月28日下午2点26分'

    },
    {
        author: 'Author',
        title: '文章2',
        content: '这是文章2的详细内容，切换效果正常了！',
        time: '2025年9月28日下午2点26分'
    }
]
</script>

<template>
    <div class="main">
        <blogPageOne>
            <div class="tab-container">
                <input type="radio" name="passage1" id="passage1" checked>
                <label for="passage1" class="tab1">文章1</label>
                <input type="radio" name="passage1" id="passage2">
                <label for="passage2" class="tab2">文章2</label>

                <div class="form-bar" id="form-bar">
                    <div class="form-content">
                        <articleLists :articles="articles"></articleLists>
                    </div>
                    <div class="form-content">
                        <articleLists2 :articles="articles"></articleLists2>
                    </div>
                </div>
            </div>
            <label class="switch">
                <input type="checkbox">
                <span class="slider"></span>
            </label>
        </blogPageOne>
    </div>
</template>

<style lang="scss" scoped>
@use '@/assets/variables.scss' as *;

.main {
    display: flex;
    justify-content: center;
    padding-top: 10px;

    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;

        input {
            display: none;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            border-radius: 34px;
            transition: .4s;

            &::before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                border-radius: 50%;
                transition: .4s;
            }
        }

        input:checked+.slider {
            background-color: #2196F3;
        }

        input:checked+.slider:before {
            transform: translateX(26px)
        }
    }
}

input[type="radio"] {
    display: none;
}

.tab-container {
    width: 100%;
    margin-bottom: 60px;
    overflow: hidden;
    /* 隐藏溢出的内容 */
    // background-color: #fff;


    label.tab1,
    label.tab2 {
        display: inline-block;
        font-size: 18px;
        box-sizing: border-box;
        padding: 16px;
        text-align: center;
        width: 200px;
        cursor: pointer;
    }

    #passage1:checked+.tab1,
    #passage2:checked+.tab2 {
        cursor: default;
    }

    #passage1:checked~#form-bar {
        transform: translateX(0);
    }

    #passage2:checked~#form-bar {
        transform: translateX(-100%);
    }

    #form-bar {
        display: flex;
        transition: transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        // transition: transform .6s ease-in-out;
        /* 关键修改：容纳两个内容区域 */
    }

    .form-content {
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }
}
</style>